<form nz-form #form="ngForm" [nzLayout]="formLayout" [hidden]="!isShowForm" [class.inline-horizontal]="isInlineHorizontal"
      [class.empty]="!formItemList || formItemList.length <= 0">
  <div nz-row [nzGutter]="bzGutter" nzType="flex">
    <ng-container *ngFor="let item of formItemList;let index = index;trackBy: formItemtrackBy">
      <ng-container *ngIf="item.getShow()">
        <div *ngIf="item.bzLineBreak && item.lineBreakOffset" nz-col [nzSpan]="item.lineBreakOffset">&nbsp;</div>

        <div nz-col [nzSpan]="getSpan(item.bzSpan)" [nzOffset]="item.bzOffset" *ngIf="item.bzType !== 'custom'">
          <nz-form-item>
            <nz-form-label *ngIf="item.bzLabel" [class.text-left]="bzLabelAlign === 'left'" [title]="item.bzLabel"
                           [class.text-right]="bzLabelAlign === 'right'" [class.inner]="bzLabelInner" [nzRequired]="item.bzRequired"
                           [nzSpan]="bzLabelSpan" [nzNoColon]="item.bzNoColon">
              {{item.bzLabel | slice:0:14}}
              <span *ngIf="item.bzLabelInfo" nz-tooltip [nzTitle]="item.bzLabelInfo" class="text-warning">
                <i nz-icon [theme]="item.bzLabelIcon.theme" [nzType]="item.bzLabelIcon.nzType"></i>
              </span>
            </nz-form-label>
            <nz-form-control [ngSwitch]="item.bzType" [nzSpan]="bzFormItemSpan" [bzExplain]="formErrorTip">

              <!-- 单行文本表单，默认类型表单 -->
              <ng-container *ngSwitchCase="'text'">
                <nz-input-group [nzSuffix]="item.bzSuffix || suffixTemplate" [nzPrefix]="item.bzPrefix"
                                [nzAddOnBefore]="item.bzAddOnBefore" [nzAddOnAfter]="item.bzAddOnAfter">
                  <input type="text" nz-input [ngModel]="item.bzValue" (ngModelChange)="item.setValue($event)"
                         [ngModelOptions]="{updateOn: item.bzUpdateOn}"
                         placeholder="{{item.bzPlaceholder?item.bzPlaceholder:('@please-enter' | bzI18n:'core')}}" autocomplete="new-password"
                         name="{{item.bzName || formIndex + 'form-item-' + index}}" id="{{item.bzName || formIndex + 'form-item-' + index}}"
                         #innerFormItem
                         [disabled]="item.bzDisabled" [readOnly]="item.bzReadOnly" [maxLength]="item.maxLength" [bzRule]="item.bzConfig.rule"
                         [bzRuleCondition]="item.bzConfig.ruleCondition" [bzTrim]="item.bzConfig.trim" (input)="item.bzInput.emit($event)"
                         (blur)="item.onBlur($event)" (focus)="item.onFocus($event)" (mousedown)="item.onMousedown($event)">
                </nz-input-group>
                <ng-template #suffixTemplate>
                  <i nz-icon theme="fill" nzType="close-circle" (click)="item.setValue(null)"
                     *ngIf="item.bzConfig?.allowClear && !item.isEmpty() && !item.bzDisabled && !item.bzReadOnly"></i>
                </ng-template>
              </ng-container>

              <!-- 密码表单，默认类型表单 -->
              <ng-container *ngSwitchCase="'password'">
                <nz-input-group [nzSuffix]="item.bzSuffix || suffixTemplate">
                  <input type="password" nz-input [ngModel]="item.bzValue" (ngModelChange)="item.setValue($event)"
                         [ngModelOptions]="{updateOn: item.bzUpdateOn}" [placeholder]="item.bzPlaceholder" autocomplete="new-password"
                         name="{{item.bzName || formIndex + 'form-item-' + index}}" id="{{item.bzName || formIndex + 'form-item-' + index}}"
                         #innerFormItem
                         [disabled]="item.bzDisabled" [readOnly]="item.bzReadOnly" [maxLength]="item.maxLength" [bzRule]="item.bzConfig.rule"
                         [bzRuleCondition]="item.bzConfig.ruleCondition" [bzTrim]="item.bzConfig.trim" (input)="item.bzInput.emit($event)"
                         (blur)="item.onBlur($event)" (focus)="item.onFocus($event)" (mousedown)="item.onMousedown($event)">
                </nz-input-group>
                <ng-template #suffixTemplate>
                  <i nz-icon theme="fill" nzType="close-circle" (click)="item.setValue(null)"
                     *ngIf="item.bzConfig?.allowClear && !item.isEmpty() && !item.bzDisabled && !item.bzReadOnly"></i>
                </ng-template>
              </ng-container>

              <!-- 多行文本表单 -->
              <ng-container *ngSwitchCase="'textarea'">
                <nz-input-group [nzSuffix]="item.bzSuffix" [nzPrefix]="item.bzPrefix"
                                [nzAddOnBefore]="item.bzAddOnBefore" [nzAddOnAfter]="item.bzAddOnAfter">
                  <textarea nz-input [ngModel]="item.bzValue" (ngModelChange)="item.setValue($event)" [ngModelOptions]="{updateOn: item.bzUpdateOn}"
                            name="{{item.bzName || formIndex + 'form-item-' + index}}"
                            id="{{item.bzName || formIndex + 'form-item-' + index}}" [disabled]="item.bzDisabled"
                            placeholder="{{item.bzPlaceholder?item.bzPlaceholder:('@please-enter' | bzI18n:'core')}}"
                            [readOnly]="item.bzReadOnly" [maxLength]="item.maxLength" [nzAutosize]="item.bzConfig?.autoSize"
                            [bzRule]="item.bzConfig.rule" #innerFormItem
                            [bzRuleCondition]="item.bzConfig.ruleCondition" [bzTrim]="item.bzConfig.trim" (input)="item.bzInput.emit($event)"
                            (blur)="item.onBlur($event)" (focus)="item.onFocus($event)" (mousedown)="item.onMousedown($event)"></textarea>
                </nz-input-group>
              </ng-container>

              <!-- 日期表单 -->
              <ng-container *ngSwitchCase="'date'">
                <nz-date-picker [ngModel]="item.bzValue" (ngModelChange)="item.setValue($event)" [nzPlaceHolder]="item.bzPlaceholder"
                                name="{{item.bzName || formIndex + 'form-item-' + index}}" id="{{item.bzName || formIndex + 'form-item-' + index}}"
                                [nzDisabled]="item.bzDisabled"
                                [nzDisabledDate]="item.bzConfig?.disabledDate"
                                [nzDisabledTime]="item.bzConfig?.disabledTime" [nzShowTime]="item.bzConfig?.showTime"
                                [nzShowToday]="item.bzConfig?.showToday" #innerFormItem
                                [nzMode]="item.bzConfig?.mode || 'date'" [nzAllowClear]="item.bzConfig?.allowClear"
                                (nzOnOpenChange)="item.onOpenChange($event)"
                                (nzOnOk)="item.bzConfig?.onOk()"></nz-date-picker>
              </ng-container>

              <!-- 时间表单 -->
              <ng-container *ngSwitchCase="'time'">
                <nz-time-picker [ngModel]="item.bzValue" (ngModelChange)="item.setValue($event)" [nzPlaceHolder]="item.bzPlaceholder"
                                name="{{item.bzName || formIndex + 'form-item-' + index}}" id="{{item.bzName || formIndex + 'form-item-' + index}}"
                                [nzDisabled]="item.bzDisabled"
                                [nzDisabledHours]="item.bzConfig?.disabledHours" #innerFormItem
                                [nzDisabledMinutes]="item.bzConfig?.disabledMinutes" [nzDisabledSeconds]="item.bzConfig?.disabledSeconds"
                                (nzOnOpenChange)="item.onOpenChange($event)" [nzHideDisabledOptions]="item.bzConfig?.hideDisabledOptions">
                </nz-time-picker>
              </ng-container>

              <!-- 日期范围表单 -->
              <ng-container *ngSwitchCase="'date-range'">
                <nz-range-picker [ngModel]="item.bzValue" (ngModelChange)="item.setValue($event)" [nzPlaceHolder]="item.bzPlaceholder"
                                 name="{{item.bzName || formIndex + 'form-item-' + index}}" id="{{item.bzName || formIndex + 'form-item-' + index}}"
                                 [nzDisabled]="item.bzDisabled"
                                 [nzDisabledDate]="item.bzConfig?.disabledDate"
                                 [nzDisabledTime]="item.bzConfig?.disabledTime" [nzShowTime]="item.bzConfig?.showTime"
                                 [nzRanges]="item.bzConfig?.ranges" #innerFormItem
                                 [nzAllowClear]="item.bzConfig?.allowClear" (nzOnOpenChange)="item.onOpenChange($event)"
                                 (nzOnOk)="item.bzConfig?.onOk($event)">
                </nz-range-picker>
              </ng-container>

              <!-- 下拉列表表单 -->
              <ng-container *ngSwitchCase="'select'">
                <nz-select [ngModel]="item.bzValue" (ngModelChange)="item.setValue($event)"
                           nzPlaceHolder="{{item.bzPlaceholder ? item.bzPlaceholder : (bzType === 'query' ? ('@select-all' | bzI18n:'core') : ('@please-choose' | bzI18n:'core'))}}"
                           [compareWith]="item.bzCompareWith" name="{{item.bzName || formIndex + 'form-item-' + index}}"
                           id="{{item.bzName || formIndex + 'form-item-' + index}}" [nzDisabled]="item.bzDisabled"
                           [nzAllowClear]="item.bzConfig?.allowClear" [nzNotFoundContent]="item.bzConfig?.notFoundContent"
                           [nzDropdownMatchSelectWidth]="item.bzConfig?.dropdownMatchSelectWidth"
                           [nzMaxMultipleCount]="item.bzConfig?.maxMultipleCount" [nzMaxTagCount]="item.bzConfig?.maxTagCount || 2"
                           [nzMaxTagPlaceholder]="item.bzConfig?.tagPlaceHolder || tagPlaceHolder"
                           [nzMode]="item.bzConfig?.mode || 'default'" [nzShowSearch]="item.bzConfig?.showSearch"
                           [bzSingleLine]="item.bzConfig?.isSingleLine" #innerFormItem
                           [nzServerSearch]="item.bzConfig?.serverSearch" (nzOnSearch)="item.bzConfig?.onSearch($event)"
                           (nzOpenChange)="item.onOpenChange($event)">
                  <nz-option *ngFor="let option of item.bzOptions" [nzValue]="item.bzOptionValue === '$this' ? option : option[item.bzOptionValue]"
                             [nzLabel]="option[item.bzOptionLabel]" [nzDisabled]="option.disabled"></nz-option>
                </nz-select>
                <ng-template #tagPlaceHolder let-selectedList>{{ '+ ' + selectedList.length }}</ng-template>
              </ng-container>

              <!-- 级联表单 -->
              <ng-container *ngSwitchCase="'cascader'">
                <nz-cascader [ngModel]="item.bzValue" (ngModelChange)="item.setValue($event)" [nzAllowClear]="item.bzConfig?.allowClear"
                             [nzOptions]="item.bzOptions" [nzLoadData]="item.bzConfig?.bzLoadData" [nzDisabled]="item.bzDisabled"
                             name="{{item.bzName || formIndex + 'form-item-' + index}}" id="{{item.bzName || formIndex + 'form-item-' + index}}"
                             [nzPlaceHolder]="item.bzPlaceholder" [nzShowSearch]="item.bzConfig?.showSearch"
                             [nzLabelProperty]="item.bzOptionLabel" [nzChangeOn]="item.bzConfig?.bzChangeOn"
                             [nzChangeOnSelect]="item.bzConfig?.bzChangeOnSelect" #innerFormItem
                             [nzValueProperty]="item.bzOptionValue" (nzVisibleChange)="item.onOpenChange($event)">
                </nz-cascader>
              </ng-container>

              <!-- 开关表单 -->
              <ng-container *ngSwitchCase="'switch'">
                <nz-switch [ngModel]="item.bzValue" (ngModelChange)="item.setValue($event)" [nzDisabled]="item.bzDisabled"
                           [nzCheckedChildren]="item.baConfig?.checkedChildren" [nzUnCheckedChildren]="item.baConfig?.unCheckedChildren"
                           name="{{item.bzName || formIndex + 'form-item-' + index}}" id="{{item.bzName || formIndex + 'form-item-' + index}}"
                           #innerFormItem></nz-switch>
                &nbsp;
                <!-- <span>{{item.bzLabel}}</span> -->
              </ng-container>

              <!-- 模态层查询 -->
              <ng-container *ngSwitchCase="'modal-search'">
                <nz-input-group nzSearch [nzAddOnAfter]="modalSearchButton">
                  <input type="text" nz-input [value]="item.bzValue || ''" name="{{item.bzName || formIndex + 'form-item-' + index}}"
                         id="{{item.bzName || formIndex + 'form-item-' + index}}" autocomplete="new-password"
                         [disabled]="item.bzDisabled" [readOnly]="true" #innerFormItem>
                </nz-input-group>
                <ng-template #modalSearchButton>
                  <i nz-icon nz-tooltip class="ant-input-clear-icon bz-ant-input-clear-icon" nzTheme="fill" nzType="close-circle"
                     *ngIf="item.bzValue && item.bzConfig?.allowClear && !item.isEmpty() && !item.bzDisabled && !item.bzReadOnly"
                     (click)="item.setValue(null)"></i>
                  <button nz-button nzType="primary" nzSearch (click)="!item.bzDisabled && item.bzConfig?.onSearch($event)">
                    <i nz-icon nzType="search"></i>
                  </button>
                </ng-template>
              </ng-container>

              <!-- 数字范围输入 -->
              <ng-container *ngSwitchCase="'input-range'">
                <nz-input-group>
                  <span class="ant-calendar-picker  ">
                    <span class="ant-calendar-picker-input ant-input ng-star-inserted" [class.ant-input-disabled]="item.bzDisabled">
                      <input type="text" class="ant-calendar-range-picker-input ng-star-inserted" [ngModel]="item.getRangeValue(0)"
                             (ngModelChange)="item.setRangeValue($event,0)" name="{{item.bzName || 'form-item-range-1' + index}}"
                             [maxLength]="item.maxLength" [bzRule]="item.bzConfig.rule" [bzRuleCondition]="item.bzConfig.ruleCondition"
                             [bzTrim]="item.bzConfig.trim" [disabled]="item.bzDisabled" [readOnly]="item.bzReadOnly"
                             (blur)="item.onBlur($event,'start')" autocomplete="new-password"
                             (focus)="item.onFocus($event,'start')" (mousedown)="item.onMousedown($event,'start')">
                      <span class="ant-calendar-range-picker-separator">~</span>
                      <input type="text" class="ant-calendar-range-picker-input ng-star-inserted" [ngModel]="item.getRangeValue(1)"
                             (ngModelChange)="item.setRangeValue($event,1)" name="{{item.bzName + '2' || 'form-item-range-2' + index}}"
                             [maxLength]="item.maxLength" [bzRule]="item.bzConfig.rule" [bzRuleCondition]="item.bzConfig.ruleCondition"
                             [bzTrim]="item.bzConfig.trim" [disabled]="item.bzDisabled" [readOnly]="item.bzReadOnly"
                             (blur)="item.onBlur($event,'end')" autocomplete="new-password"
                             (focus)="item.onFocus($event,'end')" (mousedown)="item.onMousedown($event,'start')">
                      <i nz-icon theme="fill" nzType="close-circle" class="ng-star-inserted"
                         *ngIf="item.bzConfig?.allowClear && (item.getRangeValue(0) || item.getRangeValue(1))" (click)="item.setRangeValue()"></i>
                    </span>
                  </span>
                </nz-input-group>
              </ng-container>

              <!-- 树形选择控件 -->
              <ng-container *ngSwitchCase="'tree-select'">
                <nz-tree-select [ngModel]="item.bzValue" (ngModelChange)="item.setValue($event)" [nzPlaceHolder]="item.bzPlaceholder"
                                [nzAllowClear]="item.bzConfig?.allowClear" [nzDisabled]="item.bzDisabled" [nzShowSearch]="item.bzConfig?.showSearch"
                                [nzDropdownMatchSelectWidth]="item.bzConfig?.dropdownMatchSelectWidth" [nzShowLine]="item.bzConfig?.showLine"
                                [nzNodes]="item.bzOptions" [nzCheckable]="item.bzConfig?.checkable" [nzAsyncData]="item.bzConfig?.asyncData"
                                [nzMultiple]="item.bzConfig?.multiple" name="{{item.bzName || formIndex + 'form-item-' + index}}"
                                id="{{item.bzName || formIndex + 'form-item-' + index}}" #innerFormItem>
                </nz-tree-select>
              </ng-container>

              <!-- 单选框 -->
              <ng-container *ngSwitchCase="'radio'">
                <nz-radio-group [ngModel]="item.bzValue" (ngModelChange)="item.setValue($event)" [nzDisabled]="item.bzDisabled"
                                name="{{item.bzName || formIndex + 'form-item-' + index}}" id="{{item.bzName || formIndex + 'form-item-' + index}}">
                  <label nz-radio *ngFor="let option of item.bzOptions" #innerFormItem
                         [nzValue]="item.bzOptionValue === '$this' ? option : option[item.bzOptionValue]"
                         [nzDisabled]="option.disabled">{{option[item.bzOptionLabel]}}</label>
                </nz-radio-group>
              </ng-container>

              <!-- 多选框 -->
              <ng-container *ngSwitchCase="'checkbox'">
                <ng-container *ngFor="let option of item.bzOptions;let checkboxIndex = index;">
                  <label nz-checkbox [ngModel]="item.getCheckBoxValue(option)" name="{{item.bzName + checkboxIndex}}"
                         (ngModelChange)="item.setCheckBoxValue($event,option)" [nzDisabled]="option.disabled"
                         [nzIndeterminate]="option.indeterminate" #innerFormItem>
                    {{option[item.bzOptionLabel]}}
                  </label>
                </ng-container>

              </ng-container>



            </nz-form-control>
          </nz-form-item>

          <ng-template #formErrorTip>
            <ng-container [ngSwitch]="item.errorType">
              <span *ngSwitchCase="'required'" class="text-error">
                {{'@form-validator-empty' | bzI18n:'core'}}
              </span>
              <span *ngSwitchCase="'email'" class="text-error">
                {{'@form-validator-email' | bzI18n:'core'}}
              </span>
              <span *ngSwitchCase="'url'" class="text-error">
                {{'@form-validator-url' | bzI18n:'core'}}
              </span>
              <span *ngSwitchCase="'number'" class="text-error">
                {{'@form-validator-number' | bzI18n:'core'}}
              </span>
              <span *ngSwitchCase="'tel'" class="text-error">
                {{'@form-validator-telphone' | bzI18n:'core'}}
              </span>
              <span *ngSwitchCase="'mobile'" class="text-error">
                {{'@form-validator-mobile' | bzI18n:'core'}}
              </span>
              <span *ngSwitchCase="'maxlength'" class="text-error">
                该字段长度不能超过{{item.bzMaxLength}}个字符
              </span>
              <span *ngSwitchCase="'minlength'" class="text-error">
                该字段长度最少需要{{item.bzMinLength}}个字符
              </span>
              <span *ngSwitchCase="'max'" class="text-error">
                该字段必须大于{{item.bzMax}}
              </span>
              <span *ngSwitchCase="'min'" class="text-error">
                该字段必须小于{{item.bzMin}}
              </span>
              <ng-container *ngSwitchDefault>
                <ng-container *ngIf="item.contentTemplate">
                  <ng-template [ngTemplateOutlet]="item.contentTemplate" [ngTemplateOutletContext]="item.context"></ng-template>
                </ng-container>

              </ng-container>
            </ng-container>

          </ng-template>
        </div>

        <div nz-col [nzSpan]="getSpan(item.bzSpan)" [nzOffset]="item.bzOffset" *ngIf="item.bzType === 'custom'">
          <ng-template [ngTemplateOutlet]="item.contentTemplate" [ngTemplateOutletContext]="item.context"></ng-template>
        </div>
      </ng-container>
    </ng-container>

    <div nz-col [nzSpan]="actionSpan" *ngIf="bzType === 'query'" class="action-bar">
      <nz-form-item [class.one-row]="actionSpan === 24">
        <nz-form-control class="text-right">
          <button nz-button nzType="primary" class="btn-text" *ngIf="formItemList.length >= 2" (click)="showFieldModal()"
                  type="button">{{'@more' | bzI18n:'core'}}</button>
          <button nz-button (click)="formRest()" [hidden]="!bzShowResetBtn" type="button">{{'@reset' | bzI18n:'core'}}</button>
          <button nz-button (click)="onQuery()" nzType="primary" [nzLoading]="submitting" type="submit">{{'@search' | bzI18n:'core'}}</button>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
</form>
